<template>
  <section>
    <div
      class="bg-center bg-cover h-112.5 mt-7.5 before:banner-mask relative pt-7.5"
      :style="{ backgroundImage: `url(${params.imgUrl})` }"
    >
      <div class="text-white mt-12.5 mx-auto w-225 relative">
        <div class="text-2def">{{ params.title }}</div>
        <div class="mt-12 mb-14 text-19 grid gap-y-3">
          <div v-for="(item, index) in params.subtitle" :key="index" class="flex items-center">
            <span class="bg-white h-5 w-5 mr-4 rounded-sm flex justify-center items-center">
              <svg
                t="1733821378268"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2173"
                width="16"
                height="16"
                stroke="black"
                stroke-width="64"
              >
                <path
                  d="M97.1136 500.1728a56.7296 56.7296 0 0 0-80.448 0 57.2672 57.2672 0 0 0 0 80.768l284.4416 285.5296a56.7296 56.7296 0 0 0 80.448 0L1007.36 238.2848a57.2672 57.2672 0 0 0 0-80.768 56.7296 56.7296 0 0 0-80.4608 0L341.3376 745.344 97.1136 500.1728z"
                  fill="#000000"
                  p-id="2174"
                ></path>
              </svg>
            </span>
            <span class="tracking-normal leading-6" style="width: 97%"> {{ item }} </span>
          </div>
        </div>
        <button class="bg-red-650 h-10.5 w-50 rounded-sm hover:bg-red-900 hover:opacity-85" @click="getQuote">
          <span class="flex justify-center items-center">
            Get Instant Quote
            <svg
              t="1733819892174"
              class="icon inline ml-2"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2171"
              width="16"
              height="16"
            >
              <path
                d="M612.2752 512l-313.344 309.7088a58.0352 58.0352 0 0 0 0 82.752 59.6864 59.6864 0 0 0 83.7248 0l355.2-351.0912a58.0352 58.0352 0 0 0 0-82.7392l-355.2-351.104a59.6864 59.6864 0 0 0-83.712 0 58.0352 58.0352 0 0 0 0 82.7648L612.288 512z"
                fill="#ffffff"
                p-id="2172"
              ></path>
            </svg>
          </span>
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import {useRouter} from "vue-router";

defineProps({
  params: {
    title: '',
    imgUrl: '',
    subtitle: []
  }
})

// 通过路由跳转到询价页面
const router = useRouter()
const getQuote = () => {
  router.push({ path: '/contact-us' })
}

</script>

<style scoped></style>
